import {
  ProForm,
  ProFormCheckbox,
  ProFormSegmented,
  ProFormText,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const Page8: React.FC = () => {
  const handleSubmit = async (values: any) => {
    console.log("表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>分段选择表单</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 600 }}
      >
        <ProFormText
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          rules={[{ required: true, message: "请输入姓名" }]}
        />

        <ProFormSegmented
          name="userType"
          label="用户类型"
          options={[
            { label: "个人", value: "personal" },
            { label: "企业", value: "enterprise" },
            { label: "政府", value: "government" },
          ]}
          rules={[{ required: true, message: "请选择用户类型" }]}
        />

        <ProFormSegmented
          name="subscription"
          label="订阅计划"
          options={[
            { label: "免费", value: "free" },
            { label: "基础", value: "basic" },
            { label: "专业", value: "pro" },
            { label: "企业", value: "enterprise" },
          ]}
        />

        <ProFormCheckbox.Group
          name="features"
          label="功能选择"
          options={[
            { label: "数据分析", value: "analytics" },
            { label: "报表导出", value: "export" },
            { label: "API访问", value: "api" },
            { label: "技术支持", value: "support" },
          ]}
        />
      </ProForm>
    </div>
  );
};

export default Page8;
